<!--加载头部文件-->
{include file="static/view/web/Common/header.html"}
<!--加载导航栏-->
{include file="static/view/web/Common/navbar.html"}
<!--避免视频资源的防盗链-->
<meta name="referrer" content="no-referrer" />
<!--弹幕样式-->
<link rel="stylesheet" type="text/css" href="{$host_name}static/barrager/dist/css/barrager.css">
<!--弹幕插件-->
<script type="text/javascript" src="{$host_name}static/barrager/dist/js/jquery.barrager.js"></script>
<body>
<div class="container-fluid" id="danmu-page">
    <div class="row">
        <div class="col-md-12" style="background-color: white; z-index: 100;margin: 0;padding: 0">
            <div class="col-md-3" style="height: 300px;z-index: 100;background-color: white; padding: 0;">
            </div>

            <div class="col-md-6" style="padding: 0">
                <div id="danmu1" style="height: 300px; width: 100%; z-index: 98">
                    <video id="danmu" width="100%" height="300" controls>
                        <source src="https://vfx.mtime.cn/Video/2019/01/15/mp4/190115161611510728_480.mp4" type="video/mp4">
                        您的浏览器不支持 HTML5 video 标签。
                    </video>
                </div>
            </div>

            <div class="col-md-3" style="height: 300px;z-index: 100;background-color: white;padding: 0;">
            </div>
        </div>
    </div>

    <div class="row" style="margin-top: 20px;">
        <div class="col-md-12">
            <div class="col-md-3" style="height: 100px;z-index: 100;background-color: white;">
            </div>
            <div class="col-md-6" style="z-index: 98;padding: 0">
                <textarea v-model="message" rows="5" style="width: 100%"></textarea>
                <button class="btn btn-primary btn-sm" type="button" @click="sendDanmu">发送弹幕</button>
            </div>
            <div class="col-md-3" style="height: 100px; z-index: 100;background-color: white;">
            </div>
        </div>
    </div>


    <div class="row" style="margin-top: 20px;">
        <div class="col-md-12">
            <div class="col-md-offset-3 col-md-6">
                <ul class="list-group">
                    <li class="list-group-item">本质是css3的动画 + 图层的原理</li>
                    <li class="list-group-item">应用第三方js,在其上进行的修改。</li>
                    <li class="list-group-item">完善的方向可以往加入swoole即时通讯功能，实现实时弹幕</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<!--记载尾部-->
{include file="static/view/web/Common/footer.html"}